<template>
	<div class="zh-comment-artical">
        <div class="zh-table">
            <!-- 搜索栏 -->
            <div class="comment-artical-bar zh-table-open clear">
                <!-- <input class="fl" type="text" placeholder="文章标题 / 发稿人" />
                <button class="comment-artical-search pointer fl">搜索</button>
                <button @click="deleteChosen" class="deleteByQuery pointer fr">批量删除</button>
                <button @click="" class="publish-artical pointer fr">发布文章</button> -->
                <div class="zh-table-open clear">
                    <div class="zh-open-left fl">
                        <div class="open-width" style="width: 220px">
                        <el-input v-model="keyword" placeholder="文章标题 / 发稿人" @keyup.enter.native="searchFunc"></el-input>
                        </div>
                        <el-button type="primary"  @click="searchFunc">搜索</el-button>
                        <el-button type="primary"  @click="reset">重置</el-button>
                    </div>
                    <div class="zh-open-right fr">
                        <el-button type="primary" @click="publish">发布文章</el-button>
                        <el-button type="danger" @click="deleteChosen">批量删除</el-button>
                    </div>
                </div>
            </div>
            
            <!-- 表格 -->
            <div class="comment-artical-table zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                <el-table
                    max-height="541"
                    ref="multipleTable"
                    :data="commentList"
                    border
                    @selection-change="handleSelectionChange">
                    <el-table-column
                        type="selection"    
                        width="56"
                        fixed>
                    </el-table-column>
                    <el-table-column
                        prop="title"
                        label="文章标题"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="username"
                        label="发稿人"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        label="发稿时间"
                        width="200">
                        <template slot-scope="scope">{{ scope.row.update_time }}</template>
                    </el-table-column>
                    <el-table-column
                        label="最后修改时间"
                        width="200">
                        <template slot-scope="scope">{{ scope.row.update_time }}</template>
                    </el-table-column>
                    <el-table-column
                        prop="control"
                        label="操作"
                        style="min-width:309px;"
                        >
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.top==0" type="text" @click="setTop(scope.row.id)">置顶</el-button>
                            <el-button v-if="scope.row.top==1" type="text" @click="setTopCancel(scope.row.id)">取消置顶</el-button>
                            <el-button type="text" @click="articalDetails(scope.row.id)">详情</el-button>
                            <el-button type="text" @click="editArtical(scope.row.id)">编辑</el-button>
                            <el-button @click="deleteCurrent(scope.row)" class="delete-button" type="text">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="table-pagination" v-show="total_number > 10">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="listParam.page_index"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="listParam.size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total_number">
                    </el-pagination>
                    <div class="pagination-button">
                        <el-button 
                            @click="getList"
                            type="primary" icon="el-icon-refresh" 
                            circle title="刷新数据" size="mini" >
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
  	export default {
	    data() {
            return {
                // 加载数据时显示的信息和加载动画
                loading:{
                    status:false,
                    txt:'获取数据...',
                },
                keyword:'',      // 搜索框输入的关键字
                total_number:0,     // 存放一共有多少条文章的数量
                // 表单显示的数据
                commentList: [],
                multipleSelection: [],     // 存放已选项的数组
                listParam:{
                    type:2,     // 1：轮播文章；2：普通文章
                    page_index:1,     // 无
                    page_size:10,     // 无
                    data_type:1,     // 0：没有分页 ； 1：有分页
                    keyword:'',     // 关键字搜索（文章标题或创建者名）
                    order:'time'     // time：创建时间倒序（适用于后台列表）；top：置顶倒序（适用于前台列表）
                },
            }
        },
        created(){
            // 获取列表信息
            this.getList()
        },
        methods: {
            // 点击多选框时执行的方法
            handleSelectionChange(val) {
                // console.log(val)
                this.multipleSelection = val;
            },
            // 当改变每页展示数量时执行的方法
            handleSizeChange(val) {
                this.listParam.page_index = 1;
                this.listParam.page_size = val;
                this.getList()
                // console.log('handleSizeChange:',this.listParam)
            },
            // 当改变页码是执行的方法
            handleCurrentChange(val) {
                this.listParam.page_index = val;
                this.getList();
                // console.log('handleCurrentChange:',this.listParam)
            },
            articalDetails(id){
                this.$router.push('alumni-artical-details/'+id)
            },
            // 按关键字的搜索
            searchFunc(){
                // console.log('搜索关键字：',this.keyword)
                this.listParam.page_index = 1;     // 无
                this.listParam.keyword = this.keyword;     // 关键字搜索（文章标题或创建者名）
                this.getList();
            },
            // 重置
            reset(){
                this.listParam.page_index = 1;     // 无
                this.listParam.keyword = this.keyword = '';     // 关键字搜索（文章标题或创建者名）
                this.getList(); 
            },
            // 获取数据列表
            getList(){
                // 显示加载动画
                this.loading.status = true;
                let success = (res=>{
                    // 隐藏加载动画
                    this.loading.status = false;

                    var data = res.data;
                    // console.log(data)
                    this.total_number = data.data_sum;

                    this.commentList = data.data

                })
                let fail = ( data => {
                    // 隐藏加载动画
                    this.loading.status = false;
                })
                //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                this.$ajax.get('api/alumni/alumniNews',{params: this.listParam,func:{success:success,fail:fail}})
            },
            // 批量删除
            deleteChosen(){
                // 获取到选中的文章id
                var deleteIds = this.multipleSelection.map(item=>item.id);
                // console.log(deleteIds)

                if(deleteIds.length==0){
                    return this.$message.error('请选择要删除的项')
                }

                let yes = ( data => {
                    // console.log("删除当前id:",obj.id)
                    let success = ( data => {
                        this.$message.success(data.msg);
                        
                        // 检测当前列表数据是否只有一条
                        if (this.commentList.length == 1) {
                            // 判断当前页面是否为第一页
                            if (this.listParam.page_index > 1) {
                                this.listParam.page_index-- ;
                            } else {
                                this.listParam.page_index = 1;
                            }
                        }

                        this.getList();
                    });
                    this.$ajax.delete('api/alumni/alumniNews',{params:{id:deleteIds},func:{success:success}})
                })
                let cancel = ( data => {})
                this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 已选项 删除吗？'});
            },
            // 操作栏操作方法
            // 置顶
            setTop(id){
                // console.log("置顶",id)
                let success = (res=>{
                    // console.log(res)
                    this.getList()
                })
                //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                this.$ajax.put('/api/alumni/alumniNews',
                    {
                        id:id,     // 文章id
                        top:1,     // 置顶（0：否；1：是）
                    },
                    {func:{success:success}}
                )
            },
            // 跳转到发布文章页
            publish(){
                this.$router.push('/life/alumni/alumni-publish')
            },
            // 跳转到编辑页面
            editArtical(id){
                this.$router.push('alumni-edit/'+id)
            },
            // 取消置顶
            setTopCancel(id){
                // console.log("取消置顶",id)
                let success = (res=>{
                    // console.log(res)
                    this.getList()
                })
                //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                this.$ajax.put('api/alumni/alumniNews',
                    {
                        id:id,     // 文章id
                        top:0,     // 置顶（0：否；1：是）
                    },
                    {func:{success:success}}
                )
            },
            // 删除当前
            deleteCurrent(obj){
                // console.log("删除当前id:",obj.id)
                let yes = ( data => {
                    // console.log("删除当前id:",obj.id)
                    let success = ( data => {
                        this.$message.success(data.msg);
                        
                        // 检测当前列表数据是否只有一条
                        if (this.commentList.length == 1) {
                            // 判断当前页面是否为第一页
                            if (this.listParam.page_index > 1) {
                                this.listParam.page_index-- ;
                            } else {
                                this.listParam.page_index = 1;
                            }
                        }

                        this.getList();
                    });
                    this.$ajax.delete('api/alumni/alumniNews',{params:{id:obj.id},func:{success:success}})
                })
                let cancel = ( data => {})
                this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.title+' 删除吗？'});
            }
        }
  	}
</script>
<style lang="scss">
	.zh-comment-artical {
		.comment-artical-bar{
            // padding-top:19px;
            // height:30px;
            // &>input{
            //     box-sizing:border-box;
            //     padding:0 13px;
            //     width:220px;
            //     height:30px;
            //     line-height:30px;
            //     font-size: 12px;
            //     color: #000;
            //     letter-spacing: 0;
            //     background: #FFFFFF;
            //     border: 1px solid #DDDDDD;
            //     &::webkit-input-placeholder{
            //         line-height:30px;
            //         color: #999999;
            //     }
            // }
            // &>button{
            //     margin-left:10px;
            //     height:100%;
            //     font-size: 14px;
            //     color: #FFFFFF;
            //     letter-spacing: 0;
            //     text-align:center;
            //     background: #348EFC;
            //     border-radius: 3px;
            //     border:0 none;
            //     &.comment-artical-search{
            //         width:82px;
            //     }
            //     &.publish-artical{
            //         margin-right:10px;
            //         width:96px;
            //     }
            //     &.deleteByQuery{
            //         width:80px;
            //         background: #C42E5F;
            //     }
            // }
        }
        .comment-artical-table{
            margin-top:20px;
            table{
                thead{
                    tr{
                        th{
                            border:0 none;
                            text-align:center;
                            &.gutter{
                                width:0;
                            }
                        }
                    }
                }
                tbody{
                    tr{
                        td{
                            text-align:center;
                            button{
                                &:first-child{
                                    width:56px;
                                    text-align:right;
                                }
                                &.delete-button{
                                    color:#dd6161;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>